import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
import { initI18nDebug } from './i18n-debug'
import { checkI18nSyntax } from './i18n-syntax-checker'
import vant from 'vant'
import { showLoadingToast, closeToast } from 'vant';
import 'vant/es/toast/style';
import 'vant/lib/index.css'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// // 显示加载状态
// showLoadingToast({
//   message: 'Loading...',
//   forbidClick: true,
//   duration: 0
// });

import {
  Button, NavBar, Divider, Cell, CellGroup,
  Popup, Picker, Toast, Form, Field, ConfigProvider, Icon, Uploader
} from 'vant'
// 导入全局样式
import './styles/global.scss'

// 添加调试日志，检查i18n的加载情况
console.log('i18n加载状态:', i18n.global.availableLocales)
console.log('当前语言:', i18n.global.locale.value)
console.log('加载的语言文件列表:', i18n.global.messages)

// 创建应用实例
const app = createApp(App)

// 注册自适应文本指令
app.directive('fitText', {
  mounted(el) {
    fitText(el);
    // 窗口大小变化时重新调整
    window.addEventListener('resize', () => fitText(el));
  },
  updated(el) {
    // 内容更新时重新调整
    fitText(el);
  }
});

// 自适应文本函数
function fitText(el: any) {
  // 重置字体大小以便测量
  el.style.fontSize = '';

  // 获取初始字体大小和内容宽度
  const style = window.getComputedStyle(el);
  const initialFontSize = parseFloat(style.fontSize);
  const containerWidth = el.offsetWidth;
  const contentWidth = el.scrollWidth;

  // 如果内容超出容器宽度，调整字体大小
  if (contentWidth > containerWidth) {
    const ratio = containerWidth / contentWidth;
    // 计算新的字体大小，最小保留为原始大小的70%
    const newSize = Math.max(initialFontSize * ratio, initialFontSize * 0.7);
    el.style.fontSize = `${newSize}px`;
    console.log(`调整字体大小: ${initialFontSize}px -> ${newSize}px`);
  }
}

// 使用Pinia
app.use(createPinia().use(piniaPluginPersistedstate))

// 使用Vue Router
app.use(router)

// 使用i18n
app.use(i18n)

// 使用Vant组件
app.use(Button)
app.use(NavBar)
app.use(Divider)
app.use(Cell)
app.use(CellGroup)
app.use(Popup)
app.use(Picker)
app.use(Toast)
app.use(Form)
app.use(Field)
app.use(ConfigProvider)
app.use(Icon)
app.use(Uploader)
app.use(vant)

// 应用挂载完成后,执行语言文件检查
app.mount('#app')

// 确保关闭加载中提示
setTimeout(() => {
  closeToast();
}, 500);

// 延迟执行i18n检查,确保DOM已加载完成
setTimeout(() => {
  try {
    // 检查语言文件
    const messages = i18n.global.messages.value;
    const locale = i18n.global.locale.value;
    console.log('当前语言的消息对象:', messages[locale]);

    // 验证嵌套结构是否存在
    const basicInfoTitle = messages[locale]?.basicInfo?.title ||
      messages[locale]?.['basicInfo.title'] ||
      '未找到基本信息标题';
    console.log('basicInfo.title 值:', basicInfoTitle);

    // 尝试检查所有扁平化的键值
    try {
      // @ts-ignore
      if (window.__i18n_flat_messages) {
        console.log('扁平化的消息对象:',
          // @ts-ignore
          window.__i18n_flat_messages[locale]);
      }
    } catch (e) {
      console.error('无法访问扁平化消息对象:', e);
    }

    // 检查语言文件语法
    checkI18nSyntax();

    // 初始化i18n调试工具
    try {
      initI18nDebug();
    } catch (e) {
      console.error('i18n调试工具初始化失败:', e);
    }
  } catch (e) {
    console.error('i18n检查失败:', e);
  }
}, 1000);

// 导出应用实例和i18n实例方便调试
// @ts-ignore - 扩展window接口
window.__APP__ = app
// @ts-ignore - 扩展window接口
window.__I18N__ = i18n

// 防止类型错误
declare global {
  interface Window {
    __APP__: any;
    __I18N__: any;
    __i18n_flat_messages?: Record<string, Record<string, string>>;
  }
}
